<script setup lang="ts">
import {HomeFilled, List, Tickets, UserFilled} from "@element-plus/icons-vue";
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
const router = useRouter();
const goToHome = () => {
  router.push("/")
};
const handleLogout = () => {
  localStorage.removeItem('userInfo');
  alert('退出成功！');
  router.push('/');
};
const gotoRankingList = () => {
  router.push("/RankingList")
};
const userName = ref('')
onMounted(() => {
  // 从 localStorage 读取用户信息
  const userInfoStr = localStorage.getItem('userInfo');
  if (userInfoStr) {
    const userInfo = JSON.parse(userInfoStr);
    userName.value = userInfo.username;
  } else {
    // 未登录，跳转到登录页
    router.push('/login');
  }
});
let userId = ref("")
const userInfoStr = localStorage.getItem('userInfo'); // 获取登录信息
  try {
    const userInfo = JSON.parse(userInfoStr); // 解析为对象
    userId = userInfo.id; // 提取用户ID
    // 跳转用户页面
  } catch (error) {
    console.error('解析用户信息失败', error);
    router.push('/sign'); // 解析失败则跳登录
  }

</script>

<template>
<div style = "background: #f2f2f2 ">

 <div style = "font-size: 30px; font-weight: bold; margin-left: 10px">我的</div>
  <div>

    <el-avatar style = "margin-left: 10px; width: 70px;height: 70px;margin-top: 10px"
        src="http://localhost/appimg/game/2025-07-13_133013.png"
    />
    <span style = "font-size: 20px;margin-left: 20px;">用户：{{userName}}</span>
   <div @click = "handleLogout" class = "exit">退出登录</div>
  </div>
  <div class = "icons">
    <router-link :to="{path:'/',query:{userId}}" style="text-decoration: none">
    <div class = "icon1">
      <el-icon style = "font-size: 25px;margin-top: 5px;"><HomeFilled /></el-icon>首页
    </div>
  </router-link>
    <router-link :to="{path:'/AppList',query:{userId}}" style="text-decoration: none">
    <div class = "icon2">
      <el-icon  style = "font-size: 25px;margin-top: 5px"><List /></el-icon>分类
    </div>
    </router-link>
    <router-link :to="{path:'/RankingList',query:{userId}}" style="text-decoration: none">
    <div class = "icon3">
      <el-icon style = "font-size: 25px;margin-top: 5px"><Tickets /></el-icon>排行榜
    </div>
    </router-link>
    <div class = "icon4">
      <el-icon style = "font-size: 25px;margin-top: 5px;"><UserFilled /></el-icon>个人中心
    </div>
  </div>
</div>
</template>

<style scoped>
.exit{
  display: flex;
  justify-content: center;
  justify-items: center;
  align-items: center;

}
.icons{
  display: flex;
  margin-top: 482px;
}
.icon1{
  display: flex;
  flex-direction: column;
  font-size: 15px;
  margin-left:30px;
  justify-items: center;
  align-items: center;
  color:black;
}
.icon2{
  display: flex;
  flex-direction: column;
  font-size: 15px;
  margin-left:52px;
  justify-items: center;
  align-items: center;
  color:black;
}
.icon3{
  display: flex;
  flex-direction: column;
  font-size: 15px;
  margin-left:52px;
  justify-items: center;
  align-items: center;
  color:black;
}
.icon4{
  display: flex;
  flex-direction: column;
  font-size: 15px;
  margin-left:52px;
  justify-items: center;
  align-items: center;
}
</style>